<template>
  <div>
    <div class="logo"></div>
    <button @click="rotateLogo">click me to rotate the logo{{ rotations }}</button>
    <div ref="xxxx"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { animate, createDraggable, createSpring } from "animejs";
const rotations = ref(0);
const xxxx = ref<HTMLDivElement>();
onMounted(() => {});

onMounted(() => {
  animate(".logo", {
    scale: [
      { to: 1.25, ease: "inOut(3)", duration: 200 },
      { to: 1, ease: createSpring({ stiffness: 300 }) },
    ],
    loop: true,
    loopDelay: 250,
  });

  // Make the logo draggable around its center
  createDraggable(".logo", {
    container: [0, 0, 0, 0],
    releaseEase: createSpring({ stiffness: 200 }),
  });
});

// Animate logo rotation on click
const rotateLogo = () => {
  rotations.value++;
  animate(".logo", {
    rotate: rotations.value * 360,
    ease: "out(4)",
    onUpdate: (anim) => {
      xxxx.value!.innerHTML = anim.currentTime.toFixed(2);
    },
    duration: 1500,
  });
};
</script>

<style lang="less" scoped>
.logo {
  width: 100px;
  height: 100px;
  background: #f00;
}
</style>
